<template>
  <xdh-echarts :options='options' width='100%' height='88%'></xdh-echarts>
</template>

<script>
  import XdhEcharts from '../widgets/xdh-echarts'

  const myColor = ['#0a49b0', '#19aff4', '#ea4434', '#fbd135', '#66c860']

  export default {
    name: 'bar-one',
    components: {
      XdhEcharts
    },
    props: {
      // 柱状图数据
      seriesData: {
        type: Array,
        default() {
          return []
        }
      },
      // Xzho
      xAxisData: {
        type: Array,
        default() {
          return []
        }
      }
    },
    directives: {},
    mixins: [],
    data() {
      let _bgSum = (val) => {
        let _max = Math.max.apply(null, val) * 1.3
        return val.map(r => {
          return _max - r
        })
      }

      return {
        options: {
          grid: {
            top: 20,
            left: '16%',
            bottom: 0,
            right: '10%'
          },
          xAxis: {
            type: 'value',
            splitNumber: 9,
            axisLine: {
              show: false
            },
            splitLine: {
              lineStyle: {
                color: '#0F3D72',
                opacity: 0.2
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            }
          },
          yAxis: {
            type: 'category',
            nameLocation: 'start',
            nameTextStyle: {
              color: '#fff'
            },
            nameGap: 9,
            shadowOffsetX: '-20px',
            axisLine: {
              show: false
            },
            splitLine: {},
            axisTick: {
              show: false
            },
            axisLabel: {
              color: '#fff'
            },
            data: this.xAxisData.reverse()
          },
          series: [{
            type: 'bar',
            stack: 'chart',
            z: 3,
            itemStyle: {
              color: (params) => {
                let _currentColor = myColor[params.dataIndex % 2]
                let _valLen = this.seriesData.length

                if (params.dataIndex > _valLen - 2) {
                  _currentColor = myColor[2]
                } else if (params.dataIndex > _valLen - 3) {
                  _currentColor = myColor[3]
                } else if (params.dataIndex > _valLen - 4) {
                  _currentColor = myColor[4]
                }
                return _currentColor
              }
            },
            label: {
              normal: {
                show: true,
                position: 'right'
                // color: '#000'
              }
            },
            data: this.seriesData.reverse()
          }, {
            type: 'bar',
            stack: 'chart',
            silent: true,
            itemStyle: {
              normal: {
                color: '#0d2653'
              }
            },
            data: _bgSum(this.seriesData)
          }]
        }
      }
    },
    computed: {},
    watch: {},
    methods: {},
    created() {
    }
  }
</script>

<style scoped>

</style>
